<template>
  <div>
    <div>
      <h1 ref="titleRef">TodoList</h1>
      <input type="text" placeholder="Input some..." v-model="todoText" />
      <button @click="addTodo">Add</button>
    </div>
    <ul>
      <li v-for="todo of todoData" :key="todo.id">
        <input
          type="checkbox"
          :checked="todo.completed"
          @click="toggleTodo(todo.id)"
        />
        <span
          :style="{ textDecoration: todo.completed ? 'line-through' : '' }"
          >{{ todo.content }}</span
        >
        <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs } from 'vue';
import { todoState, addTodo, toggleTodo, removeTodo } from './model';

//toRefs()解包 将todoText, todoData成为单独的响应式数据
const { todoText, todoData } = toRefs(todoState);

const titleRef = ref(null);

onMounted(() => {
  setTimeout(() => {
    titleRef.value.innerText = '待办事项列表';
  }, 1000);
});
</script>

